<template>
    <section class="advertisingPush">
        <section class="action">
            <section>
                <el-button type="primary" @click="onPushOptions(1)"> 推送(联网+播控) </el-button>
                <el-button type="primary" @click="onPushOptions(2)"> 推送检查</el-button>
                <el-button @click="onRephotograp"> 重拍照片 </el-button>
            </section>
            <section>
                <el-button type="text" style="color: #252525;" @click="getPublishList">
                    <el-icon color="#252525"><Refresh /></el-icon>刷新列表</el-button
                >
            </section>
        </section>
        <XcTable id="xc-table" :loading="tableLoading" :data="tableData" :columns="tableColumns">
            <template #index="scope">
                {{ scope.$index + 1 }}
            </template>
            <template #skDate="scope">
                {{ scope.row.skDate ? scope.row.skDate : '-' }}
            </template>
            <template #xkDate="scope">
                {{ scope.row.xkDate ? scope.row.xkDate : '-' }}
            </template>
            <template #action="{ row }">
                <el-button type="text" @click="onDetail(row)">详情</el-button>
                <el-button v-if="row.status === '失败'" type="text" @click="onCheckErr(row)">查看错误原因</el-button>
                <el-button
                    v-if="$btnAuth('uploadPublishData') && +row.pushType === 1 && row.status === '成功' && +row.upload === 0"
                    type="text"
                    @click="switchUploadDataDialog(row)"
                >
                    <span>上刊数据回传</span>
                </el-button>
                <el-button type="text" v-if="$btnAuth('uploadPht')" @click="openBatchUploadPhtDrawer(row)"> 照片上传 </el-button>
    
            </template>
        </XcTable>
        <Pagination
            :page-no="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @changePage="changePage"
            @changePageSize="changePageSize"
        ></Pagination>
        <DetailDrawer v-if="showDetail" v-model="showDetail" :detail="detail"></DetailDrawer>
        <PushOptionsDialog
            v-if="showPushOptions"
            v-model="showPushOptions"
            :current-type="currentType"
            @success="getPublishList"
        ></PushOptionsDialog>
        <RephotographDialog
            v-if="showRephotograp"
            v-model="showRephotograp"
            @success="getPublishList"
        ></RephotographDialog>
        <el-dialog v-model="dialogErrVisible" width="410px" title="错误原因" @closed="handleClose">
            <section class="rowErr">{{ errInfo.errorSys }}</section>
            <section class="rowErr">
                错误描述：<span>{{ errInfo.errorDes }}</span>
            </section>
        </el-dialog>
        <UploadPublishDataDialog
            v-model="uploadDataDialogVisible"
            :detail="currentRow"
            @success="getPublishList"
        >
        </UploadPublishDataDialog>
        <batchUploadPhtDrawer v-model="showBatchUploadPhtDraw" :selectRow="currentRow"/>
    </section>
</template>

<script setup lang="ts">
import { computed, reactive, ref, onMounted, toRef, watch, defineAsyncComponent } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import Pagination from '@/components/common/Pagination.vue';
import { useStore } from 'vuex';
import { publishList } from '@/api/advertisingPush';
import { $btnAuth } from '@/utils/common';
import batchUploadPhtDrawer from '@/views/publication/advertisingPush/components/batchUploadPhtDrawer.vue';
interface PublishingFile {
    createTime: String,
    dataType: String,
    fileType: String,
    fileUrl: String,
};
interface ListItem {
    batchId: String,
    publishingFiles: Array<PublishingFile>,
    pushTime: String,
    pushType: Number,
    pushUser: String,
    status: String,
    skDate: String,
    xkDate: String,
    updateTime: String,
};

const store = useStore();
const userInfo = computed(() => store.state.userGroup.userInfo);
const pageInfo = reactive({
    // city: '220100',
    // supplier: 'a0075',
    city: userInfo.value.cityList[0].cityCode,
    supplier: userInfo.value.groupCode,
    pageNum: 1,
    pageSize: 10,
    total: 0,
});
const DetailDrawer = defineAsyncComponent(() => import('./components/detailDrawer.vue'));
const PushOptionsDialog = defineAsyncComponent(() => import('./components/pushOptionsDialog.vue'));
const RephotographDialog = defineAsyncComponent(() => import('./components/rephotographDialog.vue'));
const UploadPublishDataDialog = defineAsyncComponent(() => import('./components/uploadPublishDataDialog.vue'));

const tableLoading = ref(false);
const showDetail = ref(false);
const showPushOptions = ref(false);
const showRephotograp = ref(false);
const dialogErrVisible = ref(false);
const detail = ref([]);
const tableData = ref([]);
const currentType = ref(0);
const errInfo = ref({});
const currentRow = reactive<ListItem>({
    batchId: '',
    publishingFiles: [],
    pushTime: '',
    pushType: 0,
    pushUser: '',
    status: '',
    skDate: '',
    xkDate: '',
    updateTime: '',
});
const uploadDataDialogVisible = ref(false);
const tableColumns = [
    { label: '序号', key: 'index', render: true, prop: { fixed: 'left', minWidth: '100px' } },
    { label: '推送时间', key: 'pushTime', prop: { minWidth: '250px' } },
    { label: '推送ID', key: 'batchId', prop: { minWidth: '220px' } },
    { label: '操作人', key: 'pushUser', prop: { minWidth: '180px' } },
    { label: '上刊日期', key: 'skDate', render: true, prop: { minWidth: '150px' } },
    { label: '下刊日期', key: 'xkDate', render: true, prop: { minWidth: '150px' } },
    { label: '更新时间', key: 'updateTime', prop: { minWidth: '250px' } },
    { label: '推送状态', key: 'status', prop: { minWidth: '200px' } },
    { label: '操作', key: 'action', render: true, prop: { fixed: 'right', minWidth: '245px' } },
];
const getPublishList = async () => {
    tableLoading.value = true;
    let data = await publishList(pageInfo);
    tableLoading.value = false;
    tableData.value = data.data;
    pageInfo.total = data.total;
};
onMounted(async () => {
    getPublishList();
});
const changePage = (val) => {
    pageInfo.pageNum = val;
    getPublishList();
};
const changePageSize = (val) => {
    pageInfo.pageSize = val;
    getPublishList();
};
const onDetail = (row: any) => {
    detail.value = row.publishingFiles;
    showDetail.value = true;
};
const onPushOptions = (tye: number) => {
    // type 1:推送(联网+播控)2:推送检查
    showPushOptions.value = true;
    currentType.value = tye;
};
const onRephotograp = () => {
    showRephotograp.value = true;
};
const handleClose = () => {
    dialogErrVisible.value = false;
};
const onCheckErr = (row: object) => {
    errInfo.value = row.errorReason;
    dialogErrVisible.value = true;
};
const switchUploadDataDialog = (row: ListItem) => {
    uploadDataDialogVisible.value = !uploadDataDialogVisible.value;
    if (uploadDataDialogVisible.value) {
        Object.assign(currentRow, row);
    }
};

const showBatchUploadPhtDraw = ref(false);
const openBatchUploadPhtDrawer = (row:ListItem)=>{
    showBatchUploadPhtDraw.value = true;
    Object.assign(currentRow, row);
}
</script>

<style lang="scss" scoped>
.action {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.rowErr {
    font-size: 14px;
    color: #333333;
    margin-bottom: 15px;
    span {
        color: #e60044;
    }
}
</style>
